<script lang="ts" setup>
type Kind = 'dialog' | 'search' | 'test';

interface Prop {
  kind?: Kind;
}

interface Size {
  xs: number;
  sm: number;
  md: number;
  lg: number;
  xl: number;
}

type SizeList = {
  [kind in Kind]: Size;
};

const props = withDefaults(defineProps<Prop>(), {
  kind: 'dialog'
});

const sizeList: SizeList = {
  dialog: {
    xs: 24,
    sm: 24,
    md: 24,
    lg: 12,
    xl: 8
  },

  search: {
    xs: 24,
    sm: 12,
    md: 8,
    lg: 6,
    xl: 4
  },
  test: {
    xs: 0,
    sm: 0,
    md: 0,
    lg: 0,
    xl: 0
  }
};
</script>
<template>
  <el-col
    :xs="sizeList[props.kind].xs"
    :sm="sizeList[props.kind].sm"
    :md="sizeList[props.kind].md"
    :lg="sizeList[props.kind].lg"
    :xl="sizeList[props.kind].xl"
    v-bind="$attrs"
  >
    <slot></slot>
  </el-col>
</template>
<style lang="scss" scoped>
$flag: v-bind('props.kind') == 'search';
.el-col {
  > * {
    width: 100% !important;
  }

  // :deep(.el-form-item__label) {
  //   min-width: 25%;
  // }

  :deep(.el-form-item__content) {
    // min-width: 75%;

    > * {
      width: 100%;
    }
  }
}
</style>
